<template>
  <div class="container">
    <div class="app-container">
      <page-tools :show-before="true">
        <!-- 前面内容 -->
        <template v-slot:before>当前审批中 0 本月审批通过 1 本月审批驳回 0</template>
        <template>
          <el-button size="mini" type="primary" @click="$router.push('/approvals/securitySetting')">流程设置</el-button>
        </template>
      </page-tools>
      <el-card class="hr-block">
        <el-table :data="dataList" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}">
          <el-table-column type="selection" width="30" />
          <el-table-column type="index" width="80" label="序号" />
          <el-table-column prop="processName" label="审批类型" sortable />
          <el-table-column prop="username" label="申请人" sortable />
          <el-table-column label="审批发起时间" sortable>
            <template>
              <span>{{ new Date().toLocaleString() }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="审批状态" sortable>
            <template slot-scope="scope">
              <span v-if="scope.row.status===0 || scope.row.status == '' || scope.row.status == null" class="rovalsState">
                <em class="sub" />审批中
              </span>
              <span v-if="scope.row.status==1" class="rovalsState">
                <em class="stay" />审批通过
              </span>
              <span v-if="scope.row.status===2" class="rovalsState">
                <em class="adopt" />审批不通过
              </span>
              <span v-if="scope.row.status===3" class="rovalsState">
                <em class="reject" />撤销
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="toDetail(scope.row)">
                查看
              </el-button>
              <el-button type="text" size="mini" @click="toDo(scope.row,1)">
                通过
              </el-button>
              <el-button type="text" size="mini" @click="toDo(scope.row,2)">
                撤销
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" align="middle" justify="center" style="height: 60px">
          <el-pagination
            :total="page.total"
            :page-size="page.pagesize"
            layout="prev, pager, next"
            @current-change="changePage"
          />
        </el-row>
      </el-card>
    </div>
  </div>
</template>
<script>
import pageTools from './components/page-tools.vue'
import {getApprovalList,UpdateApproval} from "@/api/approval"
export default {
  name: 'Salary',
  components: { pageTools },
  data() {
    return {
      dataList:[],
      list: [
        { processName: '请假', username: '黑马孙财', procCurrNodeUserName: '管理员', process_state: '2' },
        { processName: '请假', username: '黑马孙财', procCurrNodeUserName: '管理员 黑马文吉星', process_state: '2' },
        { processName: '请假', username: '黑马孙财', procCurrNodeUserName: '管理员', process_state: '4' },
        { processName: '加班', username: '黑马孙财', procCurrNodeUserName: '黑马罗英卓 管理员', process_state: '2' },
        { processName: '离职', username: '管理员', procCurrNodeUserName: '管理员 黑马乔海 黑马董昊空', process_state: '1' },
        { processName: '离职', username: '管理员', procCurrNodeUserName: '管理员 黑马吕勇锐 黑马袁永安', process_state: '1' },
        { processName: '加班', username: '管理员', procCurrNodeUserName: '黑马孙财 管理员', process_state: '1' }
      ],
      loading: false,
      page: {
        total:10,
        pageNum:1,
        pageSize: 10
      }
    }
  },
  methods:{
    async getSocialList(){
      console.log("1111111111111111111111")
      await getApprovalList(this.page).then(res => {
        this.dataList = res.list
        this.page.total = res.total
        console.log(res)
      })
    },
    changePage(newPage) {
      this.page.newPage = newPage
      this.getApprovalList()
    },
    toDetail(obj){
      console.log(obj)
      var name = obj.processName
      switch (name){
        case '请假':
          console.log('Attempting to navigate to:', '/approvals/leaveApproval/' + obj.id); // 打印跳转路径
          this.$router.push({ path: '/approvals/leaveApproval/' + obj.id })
          break
        case '离职':
          this.$router.push({ path: '/approvals/quitApproval/' + obj.id })
          break
        case '调休':
          this.$router.push({ path: '/approvals/overtimeApproval/' + obj.id })
          break
      }

    },
    toDo(id1,id2){
      console.log(id1)
      console.log(id2)
      id1.status = id2
      console.log(id1.status)
      UpdateApproval(id1)
    }
  },

  created() {
    this.getSocialList()
  }
}
</script>
